﻿@page "/xlsio/chart-worksheet"
@inject Microsoft.JSInterop.IJSRuntime JS
@using System.IO;

@using Syncfusion.Blazor.Buttons
@*Hidden:Lines*@

@using BlazorDemos.Data.FileFormats.XlsIO

@*End:Hidden*@
@inherits SampleBaseComponent;

<SampleDescription>
  <p>This sample demonstrates how to create a simple chart sheet using XlsIO.</p>  
</SampleDescription>
<ActionDescription>
   <p>A chart sheet is a worksheet in a workbook that has its own sheet name. These are employed to give a clearer view when using a large chart with a large data. The chart is linked to worksheet data and is updated automatically when there are changes. The IChart interface is the in-memory representation of the chart worksheet in an Excel workbook. These are used to create charts and to set properties for those charts. The IChartSerie interface can be used to set various formats for a series.</p>
<p style='display: block'><b>Features:</b></p>
<ul>
<li>Axes</li>
<li>Labels</li>
<li>Titles</li>
<li>Gradients</li>
<li>Chart Types</li>
<li>Chart Filters</li>
</ul>
</ActionDescription>

<div class="control-section">
    <p style="font-weight:normal">Click the button to view an Excel spreadsheet generated by Essential XlsIO. Please note that Microsoft Excel Viewer or Microsoft Excel is required to view the resultant document.</p>

    <div class="radio-control">
        <h5 class="row">Save As:</h5>
        <div class="e-radio-wrapper">
            <SfRadioButton Label="XLS" Name="XLS" Value=@("XLS") @bind-Checked="@excelVersion"></SfRadioButton>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="e-radio-wrapper">
            <SfRadioButton Label="XLSX" Name="XLSX" Value=@("XLSX") @bind-Checked="@excelVersion"></SfRadioButton>
        </div>
    </div>
    <div class="button-section">
        <div id="button-control">
            <div class="row">
                <div>
                    <SfButton @onclick="ChartWorksheetXlsIO">Create Document</SfButton>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .radio-control {
        margin: 5% 0 2% 0;
    }

    .control-section .row {
        margin: 10px 0;
    }
</style>

@code {
    MemoryStream excelStream;
    string excelVersion = "XLSX";

    /// <summary>
    /// Create and download the Excel document with chart worksheet
    /// </summary>
    public async Task ChartWorksheetXlsIO()
    {
        ChartWorksheetService service = new ChartWorksheetService();
        excelStream = service.ChartWorksheetXlsIO(excelVersion);
        if (excelVersion == "XLSX")
        {
            await JS.SaveAs("Sample.xlsx", excelStream.ToArray());
        }
        else
        {
            await JS.SaveAs("Sample.xls", excelStream.ToArray());
        }
    }
}